<template>
  <div id="SceneView">
    <div id="content"></div>
    <div id="debug-info"></div>
  </div>
</template>

<script>
import ThreeApp from "./ThreeApp";

export default {
  name: "SceneView",
  mounted() {
    const canvas = ThreeApp.create();
    const content = this.$el.children["content"];
    content.appendChild(canvas);
    ThreeApp.start();
  },
  methods: {
    mounted() {},
  },
  components: {},
};
</script>

<style scoped>
#SceneView {
  height: 95%;
  margin-left: 203px;
  padding: 0px;
  min-width: 200px;
}
#content {
  height: 100%;
  background-color: #ffffff;
  border: 2px solid aqua;
  margin: 0px;
  padding: 2px;
}
#debug-info {
  position: absolute;
  left: 213px;
  top: 10px;
}
</style>